<template>
  <view class="edit-head">
    <view class="edit-head-first">
      <text class="edit-head-first-span">头像</text>
      <image class="edit-head-first-img" src="../../static/images/head.png">
      <image class="edit-head-first-image" src="../../static/icons/right.png" @click="touxiang">
    </view>
    <view class="edit-head-first" v-for="(item,index) in edits" :key="index">
      <text class="edit-head-first-span">{{item.context1}}</text>
      <text class="edit-head-first-text">{{item.context2}}</text>
      <image class="edit-head-first-image" :src="item.context3" @click="skip(item.url)">
    </view>
    <hr>
    <view class="edit-head-first address">
      <text class="edit-head-first-span">地址管理</text>
      <image class="edit-head-first-image" src="../../static/icons/right.png" @click="administration">
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      edits: [
        {
          context1: "姓名",
          context2: this.$store.state.revise,
          context3: "../../static/icons/right.png",
          url:"revise"
        },
        {
          context1: "地区",
          context2: this.$store.state.address,
          context3: "../../static/icons/right.png",
          url:"address"
        },
        {
          context1: "年级",
          context2: this.$store.state.stage,
          context3: "../../static/icons/right.png",
          url:"year"
        },
        {
          context1: "学校",
          context2: this.$store.state.school,
          context3: "../../static/icons/right.png",
          url:"school"
        },
      ],
    };
  },
  onShow(){
    console.log(11111);
    this.edits[0].context2 = this.$store.state.revise
    this.edits[1].context2 = this.$store.state.address
    this.edits[2].context2 = this.$store.state.stage
    this.edits[3].context2 = this.$store.state.school
  },
  methods:{
    touxiang(){
      uni.navigateTo({
        url:'person'
      })
    },
    skip(url){
      uni.navigateTo({
        url
      })
    },
    administration(){
      uni.navigateTo({
        url:'administration'
      })
    }
  }
};
</script>

<style scoped>
.edit-head {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.edit-head-first {
  width: 100%;
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  /* background-color: #fff000; */
}
.edit-head-first-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.edit-head-first-span {
  flex: 1;
  margin-left: 30rpx;
}
.edit-head-first-text {
  margin-right: 20rpx;
  color: #bbb;
}
.edit-head-first-image {
  width: 50rpx;
  height: 50rpx;
}
.address {
  margin-top: 40rpx;
  border-top: 1px solid #ddd;
}
</style>
